<template>
	<view class="out-box">
		<view class="hader">
			<view class="user">
				<view class="user_information">
					<image class="user_sculpture" src='../../static/images/铺铺转.png'></image>
					<view class="user_name">
						<view class="name_one">{{'微信用户'}}</view>
						<view class="name_two">{{user.phone}}</view>
					</view>
					<!-- <view class="user_middel" v-if="user.product_name != null">{{ user.product_name }}</view> -->
					<view class="user_right" @tap="clearuser()">退出登录</view>
				</view>
				<!-- <view class="user_vip">
					<view class="user_vip_left">
						<i><image class="vip_icon" src="../../static/images/会员.png"></image></i>
						<view class="vip_left_text">VIP会员中心</view>
					</view>
					<view class="user_vip_right">
						<view class="vip_right_text">获取更多权益</view>
						<i><image class="vip_right_icon" src="../../static/images/4.png"></image></i>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 下方店铺选择框 -->
		<view class="main">
			<view class="collect">
				<view class="collect_interest" @tap="go_my_attention()">
					<view class="interest_top">{{user.shop_collect_count}}</view>
					<view class="interest_bottom">关注店铺</view>
				</view>
				<view class="collect_Vertical "></view>
				<view class="collect_interest" @tap="go_my_shop()">
					<view class="interest_top">{{user.shop_count }}</view>
					<view class="interest_bottom">我的店铺</view>
				</view>
			</view>
			<!-- 联系客服 -->
			<view class="customer" style="border-radius: 20rpx 20rpx 0 0;border-bottom: 1px solid rgb(221, 221, 221);" @tap="open_ipone()">
				<i><image class="customer_one" src="../../static/images/客服.png@3x.png"></image></i>
				<view class="customer_text">修改手机号</view>
				<i><image class="customer_two" src="../../static/images/4.png"></image></i>
			</view>
			<view class="customer" style="border-bottom: 1px solid rgb(221, 221, 221);" @tap="service()">
				<i><image class="customer_one" src="../../static/images/kefu.png"></image></i>
				<view class="customer_text">联系客服</view>
				<i><image class="customer_two" src="../../static/images/4.png"></image></i>
			</view>
			<view class="customer" style="border-bottom: 1px solid rgb(221, 221, 221);" @tap="aboutwe()">
				<i><image class="customer_one" src="../../static/images/we.png"></image></i>
				<view class="customer_text">关于我们</view>
				<i><image class="customer_two" src="../../static/images/4.png"></image></i>
			</view>
			<view class="customer" style="border-radius: 0 0 20rpx 20rpx;" @tap="sales()">
				<i><image class="customer_one" src="../../static/images/kff.png"></image></i>
				<view class="customer_text">投诉/意见反馈</view>
				<i><image class="customer_two" src="../../static/images/4.png"></image></i>
			</view>
		</view>

	</view>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup_ipone" :is-mask-click="false">
		<view class="popupipone_center">
			<view class="popup_title">绑定/修改登录手机号</view>
			<input type="number" class="inputone" placeholder="请填写手机号关联会员账号"
			placeholder-class="placeholderStyle" v-model="iponenum">
			<view class="bottom_center">
				<view class="bottom_left" @tap.stop="colse_popup_ipone()">取消</view>
				<view class="bottom_right" @tap.stop="determine_popup_ipone()">确定</view>
			</view>
		</view>
	</uni-popup>



	<!-- <view class="tabbar">
		<Tabbar />
	</view> -->
</template>

<script setup>
import {ref,reactive,onBeforeMount,onMounted} from 'vue'
import {onShow} from '@dcloudio/uni-app'
import {onGotApiData,addClick} from '../../util/api.js'
	const props = defineProps({
		obj: String,
	});
	console.log("进来时候接受的参数",props.obj)

	// 每次切换展示页面
	onShow(()=>{
		console.log('onShow')
		user.openid = uni.getStorageSync('open_id') || ''
		// 看看本地是否存储user_id
		if(!user.openid){
			// 没有的话直接获取
			get_code()
		}else{
			// 有openid再次请求用户信息
			get_user_id()
		}	
	}) 

	// 在组件渲染之前执行
	onBeforeMount(() => {
		console.log('组件准备渲染',);
		user.user_id = uni.getStorageSync('user_id') || '';
		user.openid = uni.getStorageSync('open_id') || ''
		user.phone = uni.getStorageSync('phone') || ''
		// 看看本地是否存储user_id
		if(!user.openid){
			get_code()
		}
	})
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕',);
	});

	// 用户信息
	let user = reactive({
		openid:'',
		user_id:'',
		nickName:'',
		product_name:'',
		phone:'',
		shop_collect_count:0,
		shop_count:0,
		avatarUrl:''
	})

	// 获取用户信息和openid
	const get_code =  () => {
		wx.login({
			success: function(res) {
				console.log('我是code',res.code);//这里的返回值里面便包含code
				// code_value.code = res.code
				get_open_id(res.code)
				// 获取用户的头像和name
				// wx.getUserInfo({
				// 	success: function(res) {
				// 		console.log('我是用户信息',res)
				// 		code_value.encryptedData = res.encryptedData
				// 		code_value.iv = res.iv 
				// 		console.log('执行 get_open_id')
				// 		// 获取open_id接口
				// 	}
				// })
			},
			fail: function(res) {
				console.log('登陆失败');
			},
			complete: function(res) {},
			})	
	}
	// 获取open_id,user_id
	const get_open_id = (code) =>{
			// 获取openid相关的变量方法
		let params = reactive({
			code : code,
			// encryptedData : code_value.encryptedData,
			// iv : code_value.iv
		})
		console.log("params",params)
		onGotApiData('/api/app/login/v1/login','POST',params,open_id_result)
	}

	// 获取openid的结果
	const open_id_result = (result) => {
		console.log('result获取open_id',result)
		user.openid = result.openid
		user.userid = result.userid
		uni.setStorageSync('open_id', result.openid);
		uni.setStorageSync('user_id', result.userId);
		// 获取openid跳转到我的页面
		get_user_id()
	}

	// 查询个人信息
	const get_user_id = () =>{
		let params = reactive({
			openid : user.openid
		})
		console.log("params",params)
		onGotApiData('/api/app/mine/v1/user_info','GET',params,user_id_result)
	}
	// 查询个人信息的结果
	const user_id_result = (result) => {
		console.log('获取到的user_id',result)
		// uni.setStorageSync('user_id', result.user_id);
		user.user_id = result.user_id
		// 判断返回的有没有手机号
		if(result.phone){
			user.phone = result.phone
			uni.setStorageSync('phone', user.phone) || '';
			iponenum.value = (result.phone == null ? '' : result.phone)
		}
		user.product_name = result.product_name
		user.shop_collect_count =  result.shop_collect_count
		user.shop_count = result.shop_count
		// 是否有已经支付的订单
		uni.setStorageSync('order_count',result.order_count)
	}	
	// 清除用户信息
	const clearuser = () =>{
		// 清理本地数据缓存。
		// uni.clearStorage();
		// uni.clearStorageSync();
		// 跳转到首页
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
	// 跳转到关于我们
	const aboutwe = () =>{
		uni.navigateTo({
			url: '/pages/aboutwe/aboutwe'
		});
	}
	// 跳转到售后页面
	const sales = () =>{
		uni.navigateTo({
			url: '/pages/sales/sales'
		});
	}
	
	// 跳转到VIP支付页面
	const Package = () =>{
		addClick('小程序_我的','VIP会员点击')
		uni.navigateTo({
			url: '/pages/payvip/payvip'
		});
	}
	// 跳转到我收藏的店铺
	const go_my_attention = () => {
		uni.navigateTo({
			url: '/pages/my_attention/my_attention'
		});
	}
	// 跳转到我的店铺
	const go_my_shop = () => {
		uni.navigateTo({
			url: '/pages/my_shop/my_shop'
		});
	}
	// 点击联系客服
	const service = () =>{
		addClick('小程序_我的','联系客服')
		// window.location.href = 'https://work.weixin.qq.com/kfid/kfc57df3bacfa1fd3f9'
		wx.openCustomerServiceChat({
			extInfo: {url: 'https://work.weixin.qq.com/kfid/kfca18ef986926eda85'},
			corpId: 'ww85c14bb876bbe3c4',
			success(res) {
				console.log("我是客服",res)
			},
			fail(res){ 
				console.log("我是失败客服",res)
			}
		})
	}

	// 修改手机号中的手机号
	const iponenum = ref()
	// 定义遮罩层的弹框初始值
	const popup_ipone = ref(null)
	// 打开手机号更改页面
	const open_ipone = () =>{
		addClick('小程序_我的','修改手机号')
		popup_ipone.value.open('center')
	}
	// 关闭遮罩层
	const colse_popup_ipone = ()=>{
		console.log('取消手机号')

		popup_ipone.value.close()
	}
		// 点击遮罩层中的确认
	const determine_popup_ipone = ()=>{
		console.log('修改手机号')
		// 执行修改手机号
			modify()
		popup_ipone.value.close()
	}
	// 修改手机号的参数
	const modify = () =>{

		if(!iponenum.value){
			return uni.showToast({
				title: '请输入正确手机号',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 1500
			}) 
		}
		let params = reactive({
				phone:iponenum.value,
				user_id : user.user_id
			})
		console.log("params",params)
		onGotApiData('/api/app/mine/phone_binding','POST',params,modify_value)	
	}

	// 修改手机号的结果
	const modify_value = (result) => {
			uni.showLoading({
					title: '绑定信息中...',
					mask: true,
					duration: 2000,
			})
		console.log('获取到的user_id',result)
		// 执行一次获取user_id
		get_user_id()
	}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgb(236, 235, 235);
		width: 750rpx auto;
		.hader{
			width: 100%;
			// margin-left: 1%;
			height: 230rpx;
			// border: 1px solid black;	
			display: flex;
			justify-content:center;	
			// text-align: center;
			// padding-top: 15rpx;	
			font-family: Arial, Helvetica, sans-serif;
			font-weight: 600;
			color: #F5F5F5;
			background: linear-gradient(to bottom,rgb(255,115,66),rgb(255,193,172));	
			.user{
				width: 720rpx;
				height: 380rpx;
				// border: 1px solid black;
				.user_information{
					width: 720rpx;
					height: 130rpx;
					position: relative;
					// border: 1px solid black ;
					margin: 60rpx 0 0 16rpx;
					display: flex;
					.user_sculpture{
						width: 120rpx;
						height: 120rpx;
						// margin-left: 20rpx;
						border-radius: 50%;
					}
					.user_name{
						// width: 300rpx;
						height: 130rpx;
						// border: 1px solid pink;
						margin-top: 10rpx;
						margin-left: 16rpx;
						font-size: 34rpx;
						color: rgba(255, 255, 255, 1);
						font-weight: 400;
						.name_one{
							margin-top: 2rpx;
							font-weight: 600;
						}
						.name_two{
							margin: 20rpx 0 0 0;
							font-size: 26rpx;
						}
					}
					// 登录的按钮
					.logon{
						width: 100rpx;
					}
					.user_middel{
						// width: 150rpx;
						height: 40rpx;
						border-radius: 10rpx 20rpx 20rpx 0rpx;
						background: linear-gradient(180deg, rgba(255, 195, 0, 1) 0%, rgba(252, 205, 164, 1) 99.31%);
						margin: 20rpx 0 0 10rpx;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
					}
					.user_right{
						width: 150rpx;
						height: 50rpx;
						position: absolute;
						right: 16rpx;
						top: 40rpx;	
						// border: 1px solid black;
						text-align: center;
						line-height: 50rpx;
						background-color: rgba(255, 255, 255, 1);
						border-radius: 30rpx;
						color: rgba(56, 56, 56, 1);
						font-size: 26rpx;
						font-weight: 400;
					}
				}

				.user_vip{
					width: 700rpx;
					height: 140rpx;
					margin: 50rpx 0 -20rpx 10rpx;
					background-color: rgb(250, 213, 118);
					border-top-left-radius: 20rpx;
					border-top-right-radius:20rpx ;
					border: 1px solid rgb(250, 213, 118);
					display: flex;
					.user_vip_left{
						width: 300rpx;
						height: 90rpx;
						// background-color: pink;
						margin: 20rpx 0 0 20rpx;
						padding-top: 10rpx;
						display: flex;
						.vip_icon{
							width: 70rpx;
							height: 70rpx;
						}
						.vip_left_text{
							width: 250rpx;
							height: 70rpx;
							// line-height: 70rpx;
							margin: 12rpx 0 0 10rpx;
							color: rgb(120, 78, 27);
							font-size: 18px;
							font-weight: 600;
						}
					}
					.user_vip_right{
						width: 260rpx;
						height: 100rpx;
						// background-color: pink;
						margin: 20rpx 0 0 140rpx;
						font-size: 12px;
						// background-color: #df6262;
						display: flex;
						.vip_right_text{
							width: 170rpx;
							height: 70rpx;
							line-height: 70rpx;
							margin: 15rpx 0 0 10rpx;
							color: rgb(120, 78, 27);
							font-size: 13px;
							font-weight: 500;
						}
						.vip_right_icon{
							width: 40rpx;
							height: 40rpx;
							margin: 29rpx 0 0 0rpx;
						}
					}
				}
			}
		}
		.main{
			width: 100%;
			// margin-left: 1%;
			// border: 1px solid black;	
	
			// text-align: center;
			// padding-top: 15rpx;	
			.collect{
				width: 700rpx;
				height: 180rpx;
				margin:0 auto;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				.collect_interest{
					width: 330rpx;
					height: 180rpx;
					// border: 1px solid black;
					.interest_top{
						width: 330rpx;
						height: 76rpx;
						padding-top: 40rpx;
						// border: 1px solid black;
						font-size: 54rpx; 
						font-weight: 500;
						// line-height: 140rpx;
						text-align: center;
					}
					.interest_bottom{
						width: 330rpx;
						height: 60rpx;
						text-align: center;
						font-size: 30rpx;
						color: rgb(112, 116, 116);
						// border: 1px solid black;
					}
				}
				.collect_Vertical{
					width: 2rpx;
					height: 80rpx;
					margin: 60rpx 20rpx 10rpx 20rpx;
					border: 1px solid rgb(219, 215, 215);
				}
			}
			.customer{
				width: 700rpx;
				height: 100rpx;
				margin:0 auto;
				background-color: #fff;
				// border: 1px solid black;
				// border-radius: 20rpx;
				display: flex;
				.customer_one{
					width:56rpx;
					height: 56rpx;
					margin: 22rpx 0 0 26rpx;
				}
				.customer_text{
					width: 300rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 30rpx;
					font-weight: 600;
					margin-left: 26rpx;		
				}
				.customer_two{
					width: 40rpx;
					height: 40rpx;
					margin: 30rpx 0 0 220rpx;
				}
			}
		}

	}
	.tabbar{
			position: fixed;
			margin: 0 auto;
			bottom: 0;
		}

	// 修改手机号的遮罩层样式
	.popupipone_center{
		width: 620rpx;
		height: 380rpx;
		background-color: #F5F5F5;
		font-family: '思源黑体';
		border-radius: 20rpx;
		.popup_title{
			width: 400rpx;
			height: 100rpx;
			font-size: 34rpx;
			font-weight: 500;
			line-height: 100rpx;
			color: rgba(0, 0, 0, 1);
			margin: 0 auto;
			text-align: center;
			// margin-top: 50rpx;pa
			padding-top: 30rpx;
		}
		.inputone{
			width: 500rpx;
			height: 60rpx;
			background-color: rgba(229, 229, 229, 1);
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
		}
		.placeholderStyle{
			color: rgba(128, 128, 128, 1);
			font-weight: 500;
			font-size: 30rpx;
			line-height: 60rpx;
		}
		.bottom_center{
			width: 480rpx;
			height: 100rpx;
			// background-color: pink;
			margin: 0 auto;
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			line-height: 60rpx;
			text-align: center;
			.bottom_left{
				width: 180rpx;
				height: 60rpx;
				background-color: rgba(229, 229, 229, 1);
				color: rgba(56, 56, 56, 1);
				border-radius: 10rpx;
			}
			.bottom_right{
				width: 180rpx;
				height: 60rpx;
				// border: 1px solid black;
				background-color: rgba(255, 87, 51, 1);
				color: rgba(255, 255, 255, 1);
				border-radius: 10rpx;
			}
		}
	}
</style>
